<template>
  <!-- 联合巡检：巡视卡管理 -->
  <div class="cardmanagement-index2">
    <table />
    <div class="plan-header-box">
      <div class="subtitle-box startbox">
        <!-- <div class="icon"></div> -->
        <div class="name">巡视卡管理</div>
      </div>
      <div class="return-btn">
        <div class="return">
          <span @click="goBack"></span>
        </div>
      </div>
    </div>
    <div class="filter-box">
      <div class="filter-1">
        <el-form
          ref="elForm"
          :model="formData"
          :rules="rules"
          size="medium"
          label-width="120px"
          class="elform"
        >
          <el-row :gutter="25">
            <el-col :span="4">
              <el-row :gutter="10">
                <el-col :span="24">
                  <el-form-item label="变电站名称:">
                    <el-select
                      v-model="formData.city_value"
                      placeholder="请选择"
                      clearable
                      filterable
                      :style="{ width: '100%' }"
                    >
                      <el-option
                        v-for="item in city_options"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="任务名称:">
                    <el-input
                      v-model="formData.substation_value"
                      placeholder="请输入内容"
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="巡检类型:">
                    <el-select
                      v-model="formData.maintanceGroup_value"
                      size="small"
                      placeholder="请选择"
                      :style="{ width: '100%' }"
                    >
                      <el-option
                        v-for="item in maintancegroup_options"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="巡检方式:">
                    <el-select
                      v-model="formData.inspectionType_value"
                      size="small"
                      placeholder="请选择"
                      :style="{ width: '100%' }"
                    >
                      <el-option
                        v-for="item in inspectiontype_options"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="审核状态:">
                    <el-select
                      v-model="formData.taskState_value"
                      size="small"
                      placeholder="请选择"
                      :style="{ width: '100%' }"
                    >
                      <el-option
                        v-for="item in taskState_options"
                        :key="item.code +'1'"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-button
                    type="primary"
                    @click="conditionQury"
                    class="centerbox conditionQuryBtn"
                    icon="el-icon-search"
                  >查询</el-button>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="bottom-border"></div>
    </div>
    <div class="btn-box">
      <el-button type="primary" @click="newAdd" class="centerbox">新增</el-button>
      <el-button type="primary" @click="edit" class="centerbox">编辑</el-button>
      <el-button type="primary" @click="delet" class="centerbox">删除</el-button>
      <el-button type="primary" @click="templateDownload" class="centerbox">模板下载</el-button>
      <el-button type="primary" @click="review" class="centerbox">审核</el-button>
      <el-button type="primary" @click="release" class="centerbox">发布</el-button>
    </div>
    <div class="self-table bigTableStyle">
      <el-table
        border
        :data="tableData"
        @selection-change="handleSelectionChange"
        :row-class-name="tableRowClassName"
        style="width: 100%;"
        height="100%"
      >
        <el-table-column type="selection" :show-overflow-tooltip="true" width="50"></el-table-column>
        <el-table-column prop="NUM" label="序号" :show-overflow-tooltip="true" width="70"></el-table-column>
        <el-table-column prop="SSDSMC" label="所属地市" :show-overflow-tooltip="true" width="170"></el-table-column>
        <el-table-column prop="BDZMC" label="变电站名称" :show-overflow-tooltip="true" width="170"></el-table-column>
        <el-table-column prop="RWMC" label="任务名称" :show-overflow-tooltip="true" width="220"></el-table-column>
        <el-table-column prop="XJLX" label="巡检类型" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{scope.row.XJLX | xjlx}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="XSFS" label="巡检方式" :show-overflow-tooltip="true" width="150">
          <template slot-scope="scope">
            <span>{{scope.row.XSFS | xjfs}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="JQRID" label="机器人ID" :show-overflow-tooltip="true"></el-table-column>

        <el-table-column prop="JQR_RWID" label="任务ID" :show-overflow-tooltip="true"></el-table-column>

        <el-table-column prop="YCTS" label="延迟天数" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="ZQKSSJ" label="执行开始时间" :show-overflow-tooltip="true" width="220"></el-table-column>
        <el-table-column prop label="模板更新" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span class="pointer" v-if="scope.row.XSFS == '0'|| scope.row.XSFS == '1'">
              <span @click="mbgx(scope.row)" class="xjdwkgx"></span>
            </span>
            <span v-else @click="mbgxgx(scope.row)" class="xjdwkgxjqr pointer"></span>
          </template>
        </el-table-column>
        <el-table-column prop label="巡检点位库更新" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <i class="iconfont icondianwei" @click="xjdwkgx(scope.row)"></i>
          </template>
        </el-table-column>
        <el-table-column prop="SHZT" label="状态" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{scope.row.SHZT | shzt}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="SHR" label="审核人" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="FBR" label="发布人" :show-overflow-tooltip="true"></el-table-column>
      </el-table>
    </div>
    <div class="self-pagination elPaginationStyle centerbox">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pages.page"
        :page-sizes="[10, 20, 30]"
        :page-size="pages.pageSize"
        layout="total,prev, pager, next,sizes, jumper"
        :total="pages.totalSize"
      ></el-pagination>
    </div>
    <el-dialog :title="PopUpTitle" top="15vh" :visible.sync="dialogVisible" width="50%">
      <addlistmodules
        :bjsj="bjsj"
        v-if="dialogVisible"
        :PopUpTitle="PopUpTitle"
        @close="addlistClose"
      />
    </el-dialog>
    <el-dialog :title="'巡检点位库列'" top="10vh" :visible.sync="xjdwkgxPopUp" width="90%">
      <xjdwkgxPopUp :xjdwkForm="xjdwkForm" @deter="deter" v-if="xjdwkgxPopUp" />
    </el-dialog>
    <input
      id="file0"
      type="file"
      name="file"
      accept="application/vnd.ms-excel"
      @change="fileUpload"
    />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import addlistmodules from "./modules/addlistmodules.vue";
import xjdwkgxPopUp from "./modules/xjdwkgxPopUp.vue";
import { JointInspectionModule } from "@/store/modules/JointInspection";
import lodash from "lodash";

interface optionList {
  value: string;
  label: string;
}
interface objType {
  row: object;
  rowIndex: number;
}
interface pagesType {
  pageSize: number;
  page: number;
  totalSize: number;
}
@Component({
  components: { addlistmodules, xjdwkgxPopUp },
  filters: {
    shzt(val: any) {
      switch (val) {
        case "0":
          val = "未审核";
          break;
        case "1":
          val = "已审核";
          break;
        case "2":
          val = "已发布";
          break;
      }
      return val;
    },
    xjlx(val: any) {
      switch (val) {
        case "1":
          val = "例行巡检";
          break;
        case "2":
          val = "自定义巡检";
          break;
        case "3":
          val = "专项巡检";
          break;
        case "4":
          val = "熄灯巡检";
          break;
        case "5":
          val = "特殊巡检";
          break;
      }
      return val;
    },
    xjfs(val: any) {
      switch (val) {
        case "0":
          val = "室内机器人";
          break;
        case "1":
          val = "室外机器人";
          break;
        case "2":
          val = "视频监控";
          break;
        case "3":
          val = "环境监测";
          break;
        case "4":
          val = "在线监测";
          break;
        case "5":
          val = "高清视频";
          break;
      }
      return val;
    },
  },
})
export default class extends Vue {
  // 新增弹框状态
  public dialogVisible: boolean = false;
  //新增修改弹框标题
  public PopUpTitle = "";
  // 模板下载弹框状态
  public TemplatDownload: boolean = false;
  //巡检点位库更新弹框状态
  public xjdwkgxPopUp: boolean = false;
  // 模板下载弹框
  form = {
    area: "",
    bdzmc: "",
    jcrmc: "",
  };
  area = {};
  jcrmc: Array<optionList> = [];

  //搜索框from表单数据
  formData = {
    city_value: "", //
    substation_value: "", //
    maintanceGroup_value: "", //
    inspectionType_value: "", //
    taskState_value: "", //
  };

  private rules: any = {};

  tableData: Array<any> = [];
  //选择得表格数据
  tableSelect: Array<object> = [];
  //查询传参
  query = {
    page: 1,
    rows: 20,
    bdzid: "",
    rwmc: "",
    shzt: "",
    xjlx: "",
    xsfs: "",
  };
  //传编辑数据
  bjsj = {};
  //   分页
  pages: pagesType = {
    pageSize: 20,
    page: 1,
    totalSize: 30,
  };
  //勾选id
  public id: string = "";
  //弹出ID
  xjdwkForm = {};
  //一级变电站名称
  get city_options() {
    return JointInspectionModule.LocalCityList;
  }
  // 一级巡检类型
  get maintancegroup_options() {
    let list = JointInspectionModule.getXslxList;
    return list;
  }
  //一级审核状态
  get taskState_options() {
    // return JointInspectionModule.getJhztList;
    return [
      {
        name:'全部',
        code:''
      },
      {
        name:'未审核',
        code:'0'
      },
      {
        name:'已审核',
        code:'1'
      },
      {
        name:'已发布',
        code:'2'
      },
    ]
  }
  get inspectiontype_options() {
    let list = lodash.cloneDeep(JointInspectionModule.getXsfsList);
    list.unshift({
      code: "",
      name: "全部",
    });
    console.log("list:", list);

    return list;
  }
  // 表格选择事件
  handleSelectionChange(val: any): void {
    // console.log(val);
    this.tableSelect = val;
    this.id = "";
    this.tableSelect.map((item: any) => {
      this.id = this.id + "," + item.ID;
    });
    this.id = this.id.substr(1);
  }
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: objType): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 1) {
      return "row1";
    } else {
      return "row2";
    }
  }
  //   分页
  handleSizeChange(val: any) {
    // console.log(`每页 ${val} 条`);
    this.query.rows = val;
    this.taskPagInit();
  }
  // 分页事件
  handleCurrentChange(val: any) {
    this.query.page = val;
    this.taskPagInit();
  }

  //返回按钮
  goBack() {
    window.history.back();
  }
  newAdd(): void {
    this.PopUpTitle = "新增";
    this.dialogVisible = true;
    this.bjsj = {};
    // console.log("新增");
  }
  //编辑
  edit() {
    if (this.tableSelect.length === 1) {
      this.PopUpTitle = "编辑";
      this.bjsj = this.tableSelect;
      this.dialogVisible = true;
    } else {
      this.$message({
        showClose: true,
        message: "选择一条",
        type: "warning",
      });
    }
  }
  delet(): void {
    // console.log("删除");
    if (this.tableSelect.length > 0) {
      this.$confirm("是否删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          (this as any).$services
            .taskDelete({ data: { ids: this.id }, method: "delete" })
            .then((result: any) => {
              //  console.log(result);
              if (result.code === 200) {
                this.$message({
                  showClose: true,
                  message: result.message,
                  type: "success",
                });
                this.taskPagInit();
              } else {
                this.$message({
                  showClose: true,
                  message: result.message,
                  type: "warning",
                });
              }
            })
            .catch((err: object) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    } else {
      this.$message({
        showClose: true,
        message: "至少选择一条",
        type: "warning",
      });
    }
  }
  // 模板
  templateDownload(): void {
    // console.log("模板下载");
    var a = document.createElement("a");
    a.download = name || "pic";
    a.href = "/jqrxjdwmb.xls";
    a.click();
  }
  TemplatDownloadClose() {
    this.TemplatDownload = false;
  }
  submitForm() {
    this.TemplatDownload = false;
  }
  clsoe() {
    this.TemplatDownload = false;
  }
  review(): void {
    // console.log("审核");
    if (this.tableSelect.length > 0) {
      //  console.log(this.tableSelect);

      (this as any).$services
        .taskVerify({
          data: { ids: this.id },
          method: "post",
          postparams: true,
        })
        .then((result: any) => {
          // console.log(result);
          if (result.code === 200) {
            this.$message({
              showClose: true,
              message: result.message,
              type: "success",
            });
            this.taskPagInit();
          } else {
            this.$message({
              showClose: true,
              message: result.message,
              type: "warning",
            });
          }
        })
        .catch((err: any) => {
          console.log(err);
          this.$message({
            type: "error",
            message: `${err.msg}`,
          });
        });
    } else {
      this.$message({
        showClose: true,
        message: "至少选择一条",
        type: "warning",
      });
    }
  }
  release(): void {
    // console.log("发布");

    if (this.tableSelect.length > 0) {
      //  console.log(this.tableSelect);
      (this as any).$services
        .taskPublish({
          data: { ids: this.id },
          method: "post",
          postparams: true,
        })
        .then((result: any) => {
          // console.log(result);
          if (result.code == 200) {
            this.$message({
              showClose: true,
              message: result.message,
              type: "success",
            });
            this.taskPagInit();
          } else {
            this.$message({
              showClose: true,
              message: result.message,
              type: "warning",
            });
          }
        })
        .catch((err: object) => {
          console.log(err);
        });
    } else {
      this.$message({
        showClose: true,
        message: "至少选择一条",
        type: "warning",
      });
    }
  }
  handleEdit(scope: any) {
    // console.log(scope.row);
  }

  conditionQury(): void {
    this.taskPagInit();
    // console.log("条件查询");
  }
  //新增 编辑弹框保存数据
  addlistClose(val: any) {
    this.dialogVisible = false;
    this.taskPagInit();
    // console.log(val);
  }
  //查询
  taskPagInit() {
    // 传参不一致
    // porp运维班组 没有
    this.query.bdzid = this.formData.city_value;
    this.query.rwmc = this.formData.substation_value;
    this.query.xjlx = this.formData.maintanceGroup_value;
    this.query.xsfs = this.formData.inspectionType_value;
    this.query.shzt = this.formData.taskState_value;

    (this as any).$services
      .taskPageNew({ data: this.query })
      .then((result: any) => {
        this.tableData = result.data.rows;
        // console.log(result);
        this.pages.totalSize = result.data.total;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  //
  uplo(index, vla) {
    // console.log(index);
    // console.log(vla);
  }
  //模板导入
  public fileList: any = [];
  row: object = {};
  //模板更新
  mbgx(val: any) {
    // console.log(val);
    this.row = val;
    document.getElementById("file0").setAttribute('type','text')
    document.getElementById("file0").setAttribute('type','file')
    document.getElementById("file0").click();
  }
  fileUpload() {
    
    console.log(123);
    // console.log(this.row);
    var files = (document.getElementById("file0") as any).files[0];
    console.log(files);
    
    var fd = new FormData();
    fd.append("file", files);
    fd.append("bdzid", (this.row as any).BDZID);
    fd.append("rwid", (this.row as any).ID);
    fd.append("jqrid", (this.row as any).JQRID);

    (this as any).$services
      .uploadExcel({
        data: fd,
        method: "post",
        processData: false,
        contentType: false,
        fromdata: true,
      })
      .then((result: any) => {
        // console.log(result);
        if (result.code == 200) {
          this.$message({
            type: "success",
            message: `${result.data.message}`,
          });
        } else {
          this.$message({
            type: "warning",
            message: `${result.message}`,
          });
        }
      })
      .catch((err: object) => {
        this.$message({
          type: "warning",
          message: `操作失败`,
        });
        console.log(err);
      });
  }
  mbgxgx(vla: any) {
    this.$confirm("是否更新模板更新?", "模板更新", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
    })
      .then(() => {
        let from = {
          bdzid: "",
          rwid: "",
        };
        from.bdzid = vla.BDZID;
        from.rwid = vla.JQR_RWID || "";
        (this as any).$services
          .makeXsk({ data: from, method: "post", postparams: true })
          .then((result: any) => {
            this.$message({
              type: "success",
              message: `${result.message}`,
            });
          })
          .catch((err: any) => {
            this.$message({
              type: "error",
              message: `${err.msg}`,
            });
          });
      })
      .catch(() => {
        this.$message({
          type: "info",
          message: `已取消`,
        });
      });
  }
  //巡检点位库更新
  xjdwkgx(vla: any) {
    (this as any).xjdwkForm.bdzid = vla.BDZID;
    (this as any).xjdwkForm.xsfs = vla.XSFS;
    (this as any).xjdwkForm.rwid = vla.JQR_RWID;
    (this as any).xjdwkForm.jqrid = vla.JQRID;
    this.xjdwkgxPopUp = true;
  }
  //巡检点位库更新确定按钮
  deter(bool: any, val: any) {
    this.xjdwkgxPopUp = bool;
    if (val == "") {
      return;
    } else {
      this.taskPagInit();
    }
  }
  mounted() {
    if (lodash.isEmpty(JointInspectionModule.jclxData)) {
      JointInspectionModule.setgetHjjc(); //巡视卡管理-环境监测的类型
    }
    this.taskPagInit();
  }
}
</script>

<style lang="scss" scoped>
.cardmanagement-index2 {
  width: 100%;
  height: 100%;
  padding: 0 0.24rem;
  .plan-header-box {
    height: 0.3rem;
    margin-top: 0.1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .subtitle-box {
      height: 0.3rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      // .icon {
      //   width: 0.16rem;
      //   height: 0.18rem;
      // background: url("../../../../assets/img/JointInspection/xjjh_subtitle_icon.png")
      //   no-repeat center center;
      // background-size: 100% 100%;
      // }
      .name {
        font-size: 0.18rem;
        margin-left: 0.06rem;
      }
    }
    .return-btn {
      height: 0.3rem;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .return {
        width: 0.9rem;
        height: 0.3rem;
        text-align: right;
        > span {
          display: inline-block;
          width: 0.9rem;
          height: 0.3rem;
          background: url(../../../../assets/img/return.png) no-repeat;
          background-size: 100% 100%;
          vertical-align: middle;
          cursor: pointer;
        }
      }
    }
  }
  .filter-box {
    // height: 1.04rem;
    width: 100%;
    margin-top: 0.15rem;
    .filter-1 {
      height: 0.36rem;
      width: 100%;
      margin-top: 0.1rem;
      .elform {
        width: 100%;
        height: 100%;
      }
    }
    .bottom-border {
      width: 100%;
      height: 2px;
      background: linear-gradient(
        90deg,
        rgba(30, 60, 166, 1),
        rgba(255, 255, 255, 1),
        rgba(32, 62, 168, 1)
      );
      margin-top: 0.1rem;
    }
  }
  .btn-box {
    height: 0.36rem;
    width: 100%;
    margin-top: 0.1rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .self-table {
    height: calc(100% - 2.48rem);
    width: 100%;
    margin-top: 0.1rem;
  }
  .self-pagination {
    width: 100%;
    height: 0.6rem;
  }
  .el-select {
    width: 100%;
  }
  .btns {
    display: flex;
    justify-content: flex-end;
  }
  .addposiman-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    .table-query {
      margin: 0 0.4rem;
    }
  }
  .xjdwkgx {
    display: inline-block;
    width: 0.18rem;
    height: 0.18rem;
    background: url(../../../../assets/img/JointInspection/ioc2.png) no-repeat;
    background-size: 100% 100%;
  }
  .xjdwkgxjqr {
    display: inline-block;
    width: 0.18rem;
    height: 0.18rem;
    background: url(../../../../assets/img/JointInspection/ioc1.png) no-repeat;
    background-size: 100% 100%;
  }
  #file0 {
    display: none;
  }
  .pointer,
  i {
    cursor: pointer;
  }
}
</style>
<style lang="scss">
.cardmanagement-index2 {
  //   按钮样式
  .el-button {
    width: 1.1rem;
    height: 0.36rem;
    padding: 0;
  }

  // 表格修改
  // .el-table__body-wrapper {
  //   overflow: auto;
  //   height: calc(100% - 0.4rem);
  //   .el-table__body {
  //     height: 94%;
  //   }
  // }
  // 表单输入样式设置
  .el-input--medium {
    font-size: 0.18rem;
  }
  .el-form-item__label {
    font-size: 0.18rem;
  }
  .el-select .el-input .el-input__inner {
    font-size: 0.18rem;
  }
}
</style>
